import { Button, Card, Form, Input, Table, message ,Modal} from 'antd'
import {SearchOutlined,EditOutlined,DeleteOutlined} from "@ant-design/icons"
import { ColumnsType } from 'antd/lib/table';
import { Key, useEffect, useState } from 'react';
import { ReqBatchDeleteHospitalSet, ReqDeleteHospitalSet, ReqGetHospitalSetListResponse } from '@/api/hospitalSet/hospitalSet';
import type { HospitalItem, HospitalList } from '@/api/hospitalSet/model/hospitalSetTypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';

const { confirm } = Modal;

export default function HospitalSet() {

    // 当前页码
    let [current,setCurrent]= useState<number>(1);

    //总页数
    let [total,setTotal] = useState<number>(50);

    //每页展示数量
    let [pageSize,setPageSize] = useState<number>(5);

    //声明 医院设置 列表的状态
    let [hospital,setHospital] = useState<HospitalList>([]);

    //loading 状态
    let [loading,setLoading] = useState<boolean>(false);

    //批量选中状态
    let [selectedKeys,setSelectedKeys] = useState<React.Key[]>([]);

    // 获取 useForm hook
    let [form]  = useForm();

    //获取navigate 函数
    let navigate = useNavigate();

    //设置表格 表头数据
    let columns:ColumnsType<any> = [
        {
            title:"序号",  //表头的名称
            width:80,
            align:"center",
            render(key:any,rows:any,index:number){   //自定义渲染
                return index+1;
            }
        },
        {
            title:"医院名称",
            dataIndex:"hosname",  //指向data 数据源中的数据
            align:"center",
        },
        {
            title:"医院编号",
            dataIndex:"hoscode",
            align:"center",
        },
        {
            title:"api基础路径",
            dataIndex:"apiUrl",
            align:"center",
        },
        {
            title:"签名",
            dataIndex:"signKey",
            align:"center",
        },
        {
            title:"联系人姓名",
            dataIndex:"contactsName",
            align:"center",
        },
        {
            title:"联系人手机",
            dataIndex:"contactsPhone",
            align:"center",
        },
        {
            title:"操作",
            align:"center",
            render(row:HospitalItem){
                /**
                 * 当存在 dataIndex  配置项时
                 * 
                 *  1. text  当 有 dataIndex 配置项时，text指向的就是dataIndex的值
                    2. row  指向当前这一行的数据
                    3. index  当前这一行数据的下标
                 */

                /**
                 * 当 不 存在 dataIndex  配置项时
                 * 
                 *  1. 指向当前这一行的数据
                   
                 */
               
                return <>
                    <Button onClick={()=>{
                        navigate(`/syt/hospital/hospitalSet/edit/${row.id}`);
                    }} icon={<EditOutlined />} type="primary"></Button>
                    <Button onClick={del(row.id,row.hosname)} className='ml' icon={<DeleteOutlined />} danger type="primary"></Button>
                </>
            },
            fixed:"right"
        }

    ]


    //删除单个医院数据方法
    let del = (id:number,hosname:string)=>{
        return  ()=>{
            confirm({
                title:`确定删除 ${hosname} 吗？`,
                icon:<DeleteOutlined/>,
                onOk:async ()=>{
                    // //调用方法删除单个医院
                    await ReqDeleteHospitalSet(id);

                    //提示
                    message.success("删除成功!");

                    //重新请求数据
                    getHospiatalSetList(1,5);
                }
            })





           
        }
    }


    // 请求获取医院设置列表的方法
    let getHospiatalSetList = async(page=current,limit=pageSize)=>{

         //获取表单的所有的数据
         let {hoscode,hosname} = form.getFieldsValue();

        //展示loading
        setLoading(true);

        //调用 封装的请求api获取数据
        let result = await ReqGetHospitalSetListResponse({ page, limit,hoscode,hosname });
       
        //设置医院数据
        setHospital(result.records);

        //设置总数
        setTotal(result.total)

        //关闭loading
        setLoading(false);
    }


    //模拟 componentDidMount  和componentDidUpdate
    useEffect( ()=>{
        getHospiatalSetList();
    },[current,pageSize])

    //点击提交表单方法
    let finish = ()=>{
        
        //重新发送请求获取搜索结果的数据
        getHospiatalSetList(1,5);
    }

    //清空表单
    let reset  = ()=>{
         //重新发送请求获取搜索结果的数据
         getHospiatalSetList(1,5);
    }

    //批量删除 医院信息
    let batchDel = ()=>{
        confirm({
            title:"确定删除吗？",
            async onOk(){
                //调用批量删除方法
                await ReqBatchDeleteHospitalSet(selectedKeys);
                //提示
                message.success("批量删除成功！");

                //清空选中的状态的数据
                setSelectedKeys([]);
                //重新请求数据
                getHospiatalSetList(1,5);
            }
        })
    }


    return (
        <Card>

        
            {/* 搜索表单部分 start */}
            <Form
                layout="inline"
                onFinish={finish}
                onReset={reset}
                form={form}
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

               
                <Form.Item >
                    <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                        查询
                    </Button>

                    <Button className='ml' type="default" htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            {/* 搜索表单部分 end */}

            <div className='mt'>
                <Button type="primary" onClick={()=>{
                    navigate("/syt/hospital/hospitalSet/add");
                }}>添加</Button>
                <Button onClick={batchDel} className='ml' disabled={selectedKeys.length === 0} danger type="primary">批量删除</Button>
            </div>


            {/* 表格部分 */}
            <Table 
                rowKey="id"
                rowSelection={{
                    onChange(selectedRowKeys: React.Key[]){
                        // selectedRowKeys 选中的 rowKey 的值得数组
                        // selectedRows  这一行对象
                    //    console.log(selectedRowKeys)
                       //设置选中的状态
                       setSelectedKeys(selectedRowKeys);

                    }
                }}
                columns={columns} 
                dataSource={hospital}
                bordered
                className='mt'
                scroll={{x:1200}}
                loading={loading}
                pagination={{
                    total:total,  //总数
                    pageSize:pageSize,  // 每页条数
                    current:current,  //当前页码
                    pageSizeOptions:[5,10,15,20],  //  设置每页展示数据量
                    showSizeChanger:true, //永远展示控制分页器
                    showQuickJumper:true,  //快速跳转至某页
                    showTotal(total: number){
                         return <span>总计：{total} 条</span>
                    },
                    onChange(page: number, pageSize: number){  //页码或 pageSize 改变的回调
                        // console.log(page,pageSize)
                        //设置每页显示数量
                        setPageSize(pageSize);
                        //设置当前的页码
                        setCurrent(page);
                    }
                }}
            />

        </Card>
    )
}
